<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.o012}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="" style="height: 24rpx;">

			</view>

			<view class="nameList ml-3 flex  A-Medium" :class="model=='light'?'nameListLight':''">
				<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
					:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
					{{item}}
				</view>
			</view>
			<view class="" style="height: 36rpx;">

			</view>
			<view style="width: 100%;text-align: center;">
				<image :src="'/static/images/option/1_light.png'" style="width: 690rpx;height: 27rpx;"></image>
				<!-- <image :src="'/static/images/option/1_'+model+'.png'" style="width: 690rpx;height: 27rpx;"></image> -->
			</view>

			<!-- BTC -->
			<template v-if="list">
				<view class="optionBox" :class="model=='dark'?'optionBoxBlack':''">
					<view class="boxContent">
						<!-- 头部 -->
						<view class="boxTop">
							<view class="boxIcon">
								<image :src="'/static/images/option/2_'+model+'.png'"
									style="width: 100%; height: 100%;"></image>
							</view>
							<view class="boxTitle">
								<view class="title1" :class="model=='dark'?'title1Black':''">
									{{i18n.o001}}BTC <text class="fbt"
										style="margin-left: 10rpx;">{{list.priceChangePercent}}%</text>
								</view>
								<view class="fbt">
									${{list.price}}
								</view>
							</view>
							<view class="boxright">
								<view v-if="list" class="righttime">{{ time1 }}</view>
								<view class="rightbt">
									{{i18n.o002}}
								</view>
							</view>
						</view>
						<!-- 比例信息 -->
						<view class="blBox" :class="model=='dark'?'blBoxBlack':''">
							<view class="content">
								<view class="blTitle">
									<view class="text1">
										{{i18n.o003}}
									</view>
									<view class="text2" :class="model=='dark'?'text2Color':''">
										{{i18n.o004}}
									</view>
									<view class="text1">
										{{i18n.o005}}
									</view>
								</view>
								<view class="blLine">
									<view class="flex-1 flex align-center mr-3">
										<view class="flex-1 flex align-center justify-end"
											style="background: #D22540;border-radius: 4rpx;height: 32rpx;">
											<view style="overflow: hidden;" class="flex-1 text-alignC textb">
												{{list.buyRatio}}%
											</view>
											<view v-if="list.sellRatio&&list.sellRatio!=0" class="text-alignC textb"
												style="background: #53D290;border-radius: 4rpx;height: 32rpx;"
												:style="'width:'+list.sellRatio+'%;'">
												{{list.sellRatio}}%
											</view>
										</view>
									</view>
									<!-- 	<progress percent="70" activeColor='#D22540' backgroundColor="#53D290"
										stroke-width="16" /> -->
								</view>
								<view class="blIcon">
									<view style="text-align: center;">
										<image src="/static/images/option/4_light.png"
											style="width: 36rpx;height: 36rpx;"></image>
										<view class="IconText">
											<view>{{i18n.o006}}</view>
											<view class="IconTextBl" :class="model=='dark'?'IconTextBlColor':''">
												{{list.settlementProfitPercent}}
											</view>
										</view>
									</view>
									<view style="text-align: center;">
										<image src="/static/images/option/3_light.png"
											style="width: 36rpx;height: 36rpx;"></image>
										<view class="IconText">
											<view>{{i18n.o007}}</view>
											<view class="IconTextBl" :class="model=='dark'?'IconTextBlColor':''">
												{{list.settlementLossPercent}}
											</view>
										</view>
									</view>
								</view>
								<view class="blInfo">
									<view class="leftText">
										+{{list.sellProfitPercent}}
									</view>
									<view class="centerBox">
										{{i18n.o008}}
									</view>
									<view class="rightText">
										-{{list.sellLossPercent}}
									</view>
								</view>
							</view>

						</view>
						<view class="bottomOp flex justify-between">
							<view class="btText">
								<view class="text1" :class="model=='dark'?'text1Color':''">
									{{ time2 }}
								</view>
								<view class="text2">
									{{i18n.o009}}
								</view>
							</view>
							<view class="btcenter" @click="handelBuy('BTC',list.price)">
								<image src="/static/images/option/5_light.png"
									style="width: 36rpx;height: 36rpx;margin-top: 20rpx;"></image>
								<view>
									{{i18n.o011}}
								</view>
							</view>
							<view class="btText">
								<view class="text1" :class="model=='dark'?'text1Color':''">
									{{ time3 }}
								</view>
								<view class="text2">
									{{i18n.o010}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- ETH -->
			<template v-if="list2">
				<view class="optionBox" :class="model=='dark'?'optionBoxBlack':''">
					<view class="boxContent">
						<!-- 头部 -->
						<view class="boxTop">
							<view class="boxIcon">
								<image :src="'/static/images/option/6_'+model+'.png'"
									style="width: 100%; height: 100%;"></image>
							</view>
							<view class="boxTitle">
								<view class="title1" :class="model=='dark'?'title1Black':''">
									{{i18n.o013}}ETH <text class="fbt"
										style="margin-left: 10rpx;">{{list2.priceChangePercent}}%</text>
								</view>
								<view class="fbt">
									${{list.price}}
								</view>
							</view>
							<view class="boxright">
								<view v-if="list2" class="righttime">{{ time4 }}</view>
								<view class="rightbt">
									{{i18n.o002}}
								</view>
							</view>
						</view>
						<!-- 比例信息 -->
						<view class="blBox" :class="model=='dark'?'blBoxBlack':''">
							<view class="content">
								<view class="blTitle">
									<view class="text1">
										{{i18n.o003}}
									</view>
									<view class="text2" :class="model=='dark'?'text2Color':''">
										{{i18n.o004}}
									</view>
									<view class="text1">
										{{i18n.o005}}
									</view>
								</view>
								<view class="blLine">
									<view class="flex-1 flex align-center mr-3">
										<view class="flex-1 flex align-center justify-end"
											style="background: #D22540;border-radius: 4rpx;height: 32rpx;">
											<view style="overflow: hidden;" class="flex-1 text-alignC textb">
												{{list2.buyRatio}}%
											</view>
											<view v-if="list2.sellRatio&&list2.sellRatio!=0" class="text-alignC textb"
												style="background: #53D290;border-radius: 4rpx;height: 32rpx;"
												:style="'width:'+list2.sellRatio+'%;'">
												{{list2.sellRatio}}%
											</view>
										</view>
									</view>
									<!-- 	<progress percent="70" activeColor='#D22540' backgroundColor="#53D290"
										stroke-width="16" /> -->
								</view>
								<view class="blIcon">
									<view style="text-align: center;">
										<image src="/static/images/option/4_light.png"
											style="width: 36rpx;height: 36rpx;"></image>
										<view class="IconText">
											<view>{{i18n.o006}}</view>
											<view class="IconTextBl" :class="model=='dark'?'IconTextBlColor':''">
												{{list2.settlementProfitPercent}}
											</view>
										</view>
									</view>
									<view style="text-align: center;">
										<image src="/static/images/option/3_light.png"
											style="width: 36rpx;height: 36rpx;"></image>
										<view class="IconText">
											<view>{{i18n.o007}}</view>
											<view class="IconTextBl" :class="model=='dark'?'IconTextBlColor':''">
												{{list2.settlementLossPercent}}
											</view>
										</view>
									</view>
								</view>
								<view class="blInfo">
									<view class="leftText">
										+{{list2.sellProfitPercent}}
									</view>
									<view class="centerBox">
										{{i18n.o008}}
									</view>
									<view class="rightText">
										-{{list2.sellLossPercent}}
									</view>
								</view>
							</view>

						</view>
						<view class="bottomOp flex justify-between">
							<view class="btText">
								<view class="text1" :class="model=='dark'?'text1Color':''">
									{{ time5 }}
								</view>
								<view class="text2">
									{{i18n.o009}}
								</view>
							</view>
							<view class="btcenter" @click="handelBuy('ETH',list2.price)">
								<image src="/static/images/option/5_light.png"
									style="width: 36rpx;height: 36rpx;margin-top: 20rpx;"></image>
								<view>
									{{i18n.o011}}
								</view>
							</view>
							<view class="btText">
								<view class="text1" :class="model=='dark'?'text1Color':''">
									{{ time6 }}
								</view>
								<view class="text2">
									{{i18n.o010}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- <view class="flex align-center">
				<view class="desc ml-3" :class="model=='light'?'descLight':''">
					<template v-if="topBarIndex==0">
						{{i18n.m003}}
					</template>
					<template v-else>
						{{i18n.m004}}
					</template>
				</view>
				<view @click="open" v-if="topBarIndex==1" class="time A-Regular flex align-center justify-center"
					:class="model=='light'?'timeLight':''">
					{{timeName}}
					<view class="f0">
						<image style="width: 28rpx;height: 28rpx;" src="/static/images/downArrow.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="" style="height: 24rpx;">

			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		optionsAdd,
		optionsOptionsMarkets,
		coinglassOhlc_history
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				topBarIndex: 0,
				nameList: ['15m', '30m', '60m'],
				priceType: 0,
				timeName: '12h',
				// BTC
				list: '',
				timer: null,
				time1: '-- : -- : --',
				time2: '-- : -- : --',
				time3: '-- : -- : --',
				// ETH
				list2: '',
				timer2: null,
				time4: '-- : -- : --',
				time5: '-- : -- : --',
				time6: '-- : -- : --',
			}
		},
		computed: {
			i18n() {
				return this.$t('option')
			},
			model() {
				return this.$store.state.config.model
				// return 'dark'
			}
		},
		onLoad() {
			this.getOptionsOptionsMarkets();
			this.getOptionsOptionsMarkets2();
		},
		methods: {
			getOptionsOptionsMarkets() {
				optionsOptionsMarkets({
					coinType: 'BTC',
					range: this.nameList[this.priceType]=='60m'?'1h':this.nameList[this.priceType]
				}).then(res => {
					console.log(res, 'cs-cs1');
					this.list = res.result;
					// 交割 购买 平仓
					this.changeList();
					this.list.price = Number(this.list.price).toFixed(2);
				})
			},
			getOptionsOptionsMarkets2() {
				optionsOptionsMarkets({
					coinType: 'ETH',
					range: this.nameList[this.priceType]=='60m'?'1h':this.nameList[this.priceType]
				}).then(res => {
					console.log(res, 'cs-cs2');
					this.list2 = res.result;
					// 交割 购买 平仓
					this.changeList2();
					this.list2.price = Number(this.list.price).toFixed(2);
				})
			},
			changeList() {
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(e => {
					if (this.time1 == '00:00:01') {
						clearInterval(this.timer);
						this.timer = null;
						this.getOptionsOptionsMarkets();
					}
					this.getTimeRemainingUntil1845(this.list.settlementTimeEnd.split(':'), 1);
					this.getTimeRemainingUntil1845(this.list.buyTimeEnd.split(':'), 2);
					this.getTimeRemainingUntil1845(this.list.sellTimeEnd.split(':'), 3);
				}, 1000)
			},
			changeList2() {
				clearInterval(this.timer2);
				this.timer2 = null;
				this.timer2 = setInterval(e => {
					if (this.time4 == '00:00:01') {
						clearInterval(this.timer2);
						this.timer2 = null;
						this.getOptionsOptionsMarkets2();
					}
					this.getTimeRemainingUntil1845(this.list2.settlementTimeEnd.split(':'), 4);
					this.getTimeRemainingUntil1845(this.list2.buyTimeEnd.split(':'), 5);
					this.getTimeRemainingUntil1845(this.list2.sellTimeEnd.split(':'), 6);
				}, 1000)
			},
			getTimeRemainingUntil1845(arr, type) {
				const now = new Date();
				const targetTime = new Date(now);
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					// targetTime.setDate(targetTime.getDate() + 1);
					this['time' + type] = '-- : -- : --';
					return;
				}

				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				if ((type == 3 || type == 6) && (Number(minutes)) >= 5) {
					this['time' + type] = '-- : -- : --';
				} else {
					this['time' + type] = hours + ':' + minutes + ':' + seconds;
				}
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				this.getOptionsOptionsMarkets();
				// 以太坊
				this.getOptionsOptionsMarkets2();
			},
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			handelBuy(coinType, price) {
				if (coinType == 'ETH') {
					uni.setStorageSync('option2', JSON.stringify(this.list2));
				} else {
					uni.setStorageSync('option2', JSON.stringify(this.list));
				}
				this.$tool.navTo('/pages/option/option2?tradeDuration=' + this.nameList[this.priceType] + '&coinType=' +
					coinType + '&price=' + price);

			},

		}
	}
</script>

<style scoped lang="scss">
	.mb14 {
		margin-bottom: 14rpx;
	}

	.mb24 {
		margin-bottom: 24rpx;
	}

	.desc {
		font-size: 24rpx;
		color: #AAACB8;
	}

	.descLight {
		color: #0E0F11;
	}

	.textb {
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.time {
		margin-left: 28rpx;
		width: 120rpx;
		height: 50rpx;
		background: #1F2128;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.timeLight {
		color: #0E0F11;
		background: #FFFFFF;
	}

	.topBar {
		background: rgba(28, 39, 61, 0.3);
		border-radius: 102rpx;
		border: 2rpx solid rgba(127, 131, 141, 0.3);

		.item {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #7F838D;
		}

		.item1 {
			padding: 14rpx 28rpx;
			font-size: 28rpx;
			color: #F7F7F7;
			background: #5951BA;
			border-radius: 10000rpx;
		}
	}

	.topBarLight {
		background: #FFFFFF;
	}

	.nameList {
		width: 556rpx;
		margin: 0 auto;
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}

	// 列表
	// 列表黑色
	.optionBoxBlack {
		background: #16181C !important;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #1F2128;
	}

	.optionBox {
		width: 690rpx;
		height: 576rpx;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 28rpx;
		border-radius: 30rpx;
		background: #FFFFFF;

		.boxContent {
			width: 630rpx;
			margin: 0 auto;
			padding-top: 30rpx;

			// 头部
			.boxTop {
				display: flex;

				.boxIcon {
					width: 72rpx;
					height: 72rpx;
				}

				.boxTitle {
					flex: 1;
					margin-left: 20rpx;

					.title1 {
						font-size: 28rpx;
						color: #0E0F11;
						font-weight: bold;
					}

					.title1Black {
						color: #F7F7F7 !important;
					}

					.fbt {
						font-size: 24rpx;
						color: #D22540;
					}
				}

				.boxright {
					width: 150rpx;
					text-align: right;

					.righttime {
						font-size: 28rpx;
						color: #82DA4C;
					}

					.rightbt {
						font-size: 24rpx;
						color: #7F838D;
					}
				}
			}

			// 比例
			.blBoxBlack {
				background: #1F2128 !important;
			}

			.blBox {
				width: 100%;
				height: 304rpx;
				margin-top: 32rpx;
				background: #F4F4F4;
				border-radius: 36rpx;

				.content {
					width: 570rpx;
					margin: 0 auto;
				}

				.blTitle {
					display: flex;
					justify-content: space-between;
					padding-top: 34rpx;

					.text1 {
						font-size: 28rpx;
						color: #AAACB8;
					}

					.text2 {
						font-size: 24rpx;
						color: #0E0F11;
					}

					.text2Color {
						color: #7F838D !important;
					}
				}

				.blLine {
					margin-top: 20rpx;
				}

				.blIcon {
					width: 520rpx;
					margin: 0 auto;
					margin-top: 18rpx;
					display: flex;
					justify-content: space-between;

					.IconText {
						font-size: 24rpx;
						color: #7F838D;
						margin-top: 26rpx;
					}

					.IconTextBl {
						font-size: 28rpx;
						color: #7F838D;
					}

					.IconTextBlColor {
						color: #F7F7F7 !important;
					}
				}

				.blInfo {
					width: 280rpx;
					height: 70rpx;
					margin: 0 auto;
					margin-top: -60rpx;
					display: flex;

					.leftText {
						font-size: 24rpx;
						color: #D22540;
						margin-top: 14rpx;
					}

					.centerBox {
						width: 72rpx;
						height: 64rpx;
						border-radius: 12rpx;
						border: 2rpx solid rgba(127, 131, 141, 0.39);
						font-size: 24rpx;
						color: #7F838D;
						text-align: center;
						line-height: 30rpx;
						margin: 0 42rpx;
					}

					.rightText {
						font-size: 24rpx;
						color: #53D290;
						margin-top: 14rpx;

					}
				}
			}

			// 底部
			.bottomOp {
				width: 540rpx;
				margin: 0 auto;
				margin-top: 34rpx;
				display: flex;
				.btText {
					margin-top: 20rpx;
					
					.text1 {
						font-size: 28rpx;
						color: #0E0F11;
					}

					.text1Color {
						color: #F7F7F7 !important;
					}

					.text2 {
						font-size: 24rpx;
						color: #7F838D;
					}
				}

				.btcenter {
					width: 208rpx;
					height: 208rpx;
					background: linear-gradient(180deg, #5951BA 0%, rgba(89, 81, 186, 0.6) 100%);
					border-radius: 50%;
					// margin: 0 46rpx;
					text-align: center;
					font-size: 28rpx;
					color: #F7F7F7;
				}
			}

		}
	}

	.valueItem3 {
		font-size: 24rpx;
		color: #D22540;
	}
</style>